<!DOCTYPE html>
<html>
<head>
<title>Fig. 4.32 - Electric Quadrupole Radiation</title>
</head>
<body>
<canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    const cx = 225;
    const cy = 215; // Adjusted center for better vertical alignment
    const R = 120;  // Radius of the circle

    // Style settings to emulate the sketch
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;

    // Font definitions
    const baseFont = '20px serif';
    const italicFont = 'italic ' + baseFont;
    const boldFont = 'bold ' + baseFont;
    const italicBoldFont = 'italic bold ' + baseFont;
    const italicBoldSmallFont = 'italic bold 14px serif';

    // --- Draw Coordinate Axes ---
    // x-axis
    ctx.beginPath();
    ctx.moveTo(cx - 190, cy);
    ctx.lineTo(cx + 190, cy);
    ctx.stroke();
    // x-axis arrowhead
    ctx.beginPath();
    ctx.moveTo(cx + 190, cy);
    ctx.lineTo(cx + 180, cy - 6);
    ctx.lineTo(cx + 180, cy + 6);
    ctx.closePath();
    ctx.fill();
    ctx.font = italicFont;
    ctx.fillText('x', cx + 200, cy + 8);

    // y-axis
    ctx.beginPath();
    ctx.moveTo(cx, cy + 160);
    ctx.lineTo(cx, cy - 180);
    ctx.stroke();
    // y-axis arrowhead
    ctx.beginPath();
    ctx.moveTo(cx, cy - 180);
    ctx.lineTo(cx - 6, cy - 170);
    ctx.lineTo(cx + 6, cy - 170);
    ctx.closePath();
    ctx.fill();
    ctx.fillText('y', cx + 10, cy - 185);

    // --- Draw the Circular Loop ---
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, 2 * Math.PI);
    ctx.stroke();

    // --- Define Charge Positions ---
    // Angles are in standard math format (radians, CCW from positive x-axis)
    const angle1_math = 60 * Math.PI / 180;  // for charge q at r1
    const angle2_math = 180 * Math.PI / 180; // for charge -q at r2
    const angle3_math = 300 * Math.PI / 180; // for charge -q at r3

    // Convert to canvas coordinates (y is inverted)
    const p1 = { x: cx + R * Math.cos(angle1_math), y: cy - R * Math.sin(angle1_math) };
    const p2 = { x: cx + R * Math.cos(angle2_math), y: cy - R * Math.sin(angle2_math) };
    const p3 = { x: cx + R * Math.cos(angle3_math), y: cy - R * Math.sin(angle3_math) };

    // --- Draw Position Vectors (r1, r2, r3) ---
    function drawVector(p) {
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(p.x, p.y);
        ctx.stroke();
        
        // Draw arrowhead
        const angle = Math.atan2(p.y - cy, p.x - cx);
        const arrowLength = 12;
        const arrowAngle = Math.PI / 9;
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p.x - arrowLength * Math.cos(angle - arrowAngle), p.y - arrowLength * Math.sin(angle - arrowAngle));
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p.x - arrowLength * Math.cos(angle + arrowAngle), p.y - arrowLength * Math.sin(angle + arrowAngle));
        ctx.stroke();
    }
    
    drawVector(p1);
    drawVector(p2);
    drawVector(p3);
    
    // --- Draw Labels for Vectors and Charges ---
    // r1
    ctx.font = italicBoldFont;
    ctx.fillText('r', p1.x - 38, p1.y + 15);
    ctx.font = italicBoldSmallFont;
    ctx.fillText('1', p1.x - 29, p1.y + 20);
    
    // r2
    ctx.font = italicBoldFont;
    ctx.fillText('r', p2.x + 15, p2.y - 20);
    ctx.font = italicBoldSmallFont;
    ctx.fillText('2', p2.x + 23, p2.y - 14);

    // r3
    ctx.font = italicBoldFont;
    ctx.fillText('r', p3.x - 35, p3.y - 12);
    ctx.font = italicBoldSmallFont;
    ctx.fillText('3', p3.x - 26, p3.y - 6);
    
    // Charges
    ctx.font = italicFont;
    ctx.fillText('q', p1.x + 10, p1.y - 10);
    ctx.fillText('-q', p2.x - 35, p2.y + 10);
    ctx.fillText('-q', p3.x + 10, p3.y + 20);

    // --- Draw Angle Arcs and Labels ---
    // Note: Canvas arc angles are clockwise from 3 o'clock. We convert math angles.
    const angle1_canvas = -angle1_math;
    const angle2_canvas = -angle2_math;
    const angle3_canvas = -angle3_math;

    // ωt arc
    const arc_wt_r = 50;
    ctx.beginPath();
    ctx.arc(cx, cy, arc_wt_r, 0, angle1_canvas, true); // CCW from 0 to 60 deg
    ctx.stroke();
    ctx.font = italicFont;
    ctx.fillText('ωt', cx + arc_wt_r + 5, cy - 25);

    // 120 deg arc (top)
    const arc_120_r = 70;
    ctx.beginPath();
    ctx.arc(cx, cy, arc_120_r, angle2_canvas, angle1_canvas, false); // CW from 180 to 60 deg
    ctx.stroke();
    // Arc tick marks
    ctx.beginPath();
    ctx.moveTo(cx - arc_120_r - 5, cy);
    ctx.lineTo(cx - arc_120_r, cy);
    ctx.stroke();
    
    ctx.font = baseFont;
    ctx.fillText('120', cx - 60, cy - 75);

    // 120 deg arc (bottom)
    const arc_120_2_r = 70;
    ctx.beginPath();
    ctx.arc(cx, cy, arc_120_2_r, angle2_canvas, angle3_canvas, true); // CCW from 180 to 300 deg
    ctx.stroke();
    ctx.fillText('120', cx - 60, cy + 85);

    // --- Draw Figure Caption ---
    ctx.font = boldFont;
    ctx.fillText('Fig. 4.32', cx - 40, cy + 200);

</script>
</body>
</html>